import React from 'react';
import './flowAveTrend.scss';
import SelectType from 'views/component/selectType';
import { ShopApi } from 'js/api/shop';
import XDate from 'xdate';
import moment from 'moment';
import echarts from 'js/lib/echarts';
import $ from 'jquery';
import { Popup, DatePicker, Button, Icon } from 'antd-mobile';

const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const timeData = [{ id: 'hour', name: '时' }, { id: 'day', name: '日' }, { id: 'week', name: '周' }, { id: 'month', name: '月' }, { id: 'season', name: '季' }, { id: 'year', name: '年' }];
let chartFontSize = parseInt(window.fontSize / 4);

const SelectTime = React.createClass({
    getInitialState() {
        return { startDate: null, endDate: null }
    },
    onChange(type, date) {
        this.state[type] = date;
        this.setState(this.state)
    },
    confirm() {
        if (this.props.onChange) {
            this.props.onChange(this.state.startDate, this.state.endDate)
        }
        this.props.onClose();
    },
    render() {
        let confirmNode = <div className="empty"></div>;
        if (this.state.startDate && this.state.endDate) {
            confirmNode = <Button className="btn" size="small" type="primary" onClick={this.confirm}>确定</Button>
        }
        return <div className="selectTime">
            <div className="head">时间段筛选</div>
            <div className="content">
                起始时间
                <DatePicker className="forss"
                    mode="date"
                    maxDate={this.state.endDate ? moment(this.state.endDate) : moment()}
                    onChange={this.onChange.bind(this, 'startDate')}
                    value={this.state.startDate}
                >
                    <div className="date">{this.state.startDate ? new moment(this.state.startDate).format('YYYY-MM-DD') : null}</div>
                </DatePicker>
                结束时间
                <DatePicker className="forss"
                    mode="date"
                    minDate={this.state.startDate ? moment(this.state.startDate) : null}
                    maxDate={moment()}
                    onChange={this.onChange.bind(this, 'endDate')}
                    value={this.state.endDate}
                >
                    <div className="date">{this.state.endDate ? new moment(this.state.endDate).format('YYYY-MM-DD') : null}</div>
                </DatePicker>
            </div>
            <div className="flex jc-around">
                <Button className="btn" size="small" type="primary" onClick={this.props.onClose}>取消</Button>
                {confirmNode}
            </div>
        </div>
    }
});

const FlowAveTrend = React.createClass({
    getInitialState() {
        this.selectFlowDay = false;
        return { TimeType: 'day', CurrDate: new XDate().toString('yyyy-MM-dd'), StartDate: null, EndDate: null, loading: true }
    },
    componentDidMount() {
        this.getTrendAnalysisFlow()
    },
    getTrendAnalysisFlow() {
        let query = {
            ShopId: this.props.shopId,
            CurrDate: this.state.CurrDate,
            TimeType: this.state.TimeType,
            flowDataType: this.props.flowDataType,
            AreaTypeId: this.props.AreaTypeId,
            AreaId: this.props.AreaId,
            IndustryId: this.props.AreaId
        }
        this.setState({ loading: true })
        ShopApi.getTrendAnalysisFlow(query, (data) => {
            this.setState({ loading: false })
            this.setAveDataChart(data, this.state.CurrDate);
            if (this.state.TimeType !== 'hour') {
                this.setContrastChart(data, this.state.CurrDate);
            }
        });
    },
    getTrendAnalysisFlowByDay() {
        let query = {
            ShopId: this.props.shopId,
            CurrDate: this.state.CurrDate,
            TimeType: 'week',
            StartDate: moment(this.state.StartDate).format('YYYY-MM-DD'),
            EndDate: moment(this.state.EndDate).format('YYYY-MM-DD'),
            flowDataType: this.props.flowDataType,
            AreaTypeId: this.props.AreaTypeId,
            AreaId: this.props.AreaId,
            IndustryId: this.props.AreaId
        }
        ShopApi.getTrendAnalysisFlowByDay(query, (data) => {
            this.setAveDataChartByDay(data);
        });
    },
    setAveDataChart(data, time) {
        let self = this,
            timeType = this.state.TimeType,
            year = new Date(time).getFullYear(),
            seriesData = [],
            xAxisData = [],
            ctimes = [],
            selectTime = this.state.CurrDate,
            startValue = 0,
            endValue = 5;
        for (let i = 0; i < data.length; i++) {
            if (timeType === 'year') {
                xAxisData.push(new XDate(data[i].CTIME).toString('yyyy') + '年');
                seriesData.push(data[i].CDATA);
                ctimes.push(new Date(new XDate(data[i].CTIME).toString('yyyy-MM-dd')));
            } else if (timeType === 'month' && data[i].TIMECODE === '2') {
                if (new Date().getTime() < new Date(data[i].CTIME).getTime()) {
                    continue;
                }
                xAxisData.push(new XDate(data[i].CTIME).toString('MM') + '月\n' + new XDate(data[i].CTIME).toString('yyyy') + '年');
                seriesData.push(data[i].CDATA);
                ctimes.push(new Date(new XDate(data[i].CTIME).toString('yyyy-MM-dd')));
            } else if (timeType === 'season' && data[i].TIMECODE === '1') {
                if (new Date().getTime() < new Date(year + ' ' + ((parseInt(data[i].CTIME) - 1) * 3 + 1)).getTime()) {
                    continue;
                }
                xAxisData.push('第' + data[i].CTIME + '季度\n' + (year) + '年');
                seriesData.push(data[i].CDATA);
                ctimes.push(new Date(year + ' ' + ((parseInt(data[i].CTIME) - 1) * 3 + 1)));
            } else if (timeType === 'season' && data[i].TIMECODE === '0') {
                xAxisData.push('第' + data[i].CTIME + '季度\n' + (year - 1) + '年');
                seriesData.push(data[i].CDATA);
                ctimes.push(new Date((year - 1) + ' ' + ((parseInt(data[i].CTIME) - 1) * 3 + 1)));
            } else if (timeType === 'season' && data[i].TIMECODE === '2') {
                if (new Date().getTime() < new Date((year + 1) + ' ' + ((parseInt(data[i].CTIME) - 1) * 3 + 1)).getTime()) {
                    continue;
                }
                xAxisData.push('第' + data[i].CTIME + '季度\n' + (year + 1) + '年');
                seriesData.push(data[i].CDATA);
                ctimes.push(new Date((year + 1) + ' ' + ((parseInt(data[i].CTIME) - 1) * 3 + 1)));
            } else if (timeType === 'week' && data[i].TIMECODE === '1') {
                if (new Date().getTime() < new Date(data[i].WEEKENDDAY).getTime()) {
                    continue;
                }
                xAxisData.push(new XDate(data[i].WEEKSTARTDAY).toString("MM/dd~\n") + new XDate(data[i].WEEKENDDAY).toString("MM/dd\nyyyy年"));
                seriesData.push(data[i].CDATA);
                ctimes.push(new Date(new XDate(data[i].WEEKSTARTDAY).toString('yyyy-MM-dd')));
            } else if (timeType === 'week' && data[i].TIMECODE === '0') {
                xAxisData.push(new XDate(data[i].WEEKSTARTDAY).toString("MM/dd~\n") + new XDate(data[i].WEEKENDDAY).toString("MM/dd\nyyyy年"));
                seriesData.push(data[i].CDATA);
                ctimes.push(new Date(new XDate(data[i].WEEKSTARTDAY).toString('yyyy-MM-dd')));
            } else if (timeType === 'week' && data[i].TIMECODE === '2') {
                if (new Date().getTime() < new Date(data[i].WEEKENDDAY).getTime()) {
                    continue;
                }
                xAxisData.push(new XDate(data[i].WEEKSTARTDAY).toString("MM/dd~\n") + new XDate(data[i].WEEKENDDAY).toString("MM/dd\nyyyy年"));
                seriesData.push(data[i].CDATA);
                ctimes.push(new Date(new XDate(data[i].WEEKSTARTDAY).toString('yyyy-MM-dd')));
            } else if (timeType === 'day' && data[i].TIMECODE === '3') {
                if (new Date().getTime() < new Date(data[i].CTIME).getTime()) {
                    continue;
                }
                let dayName = days[new Date(data[i].CTIME).getDay()];
                xAxisData.push(dayName + new XDate(data[i].CTIME).toString("\nMM/dd\nyyyy"));
                seriesData.push(data[i].CDATA);
                ctimes.push(new Date(new XDate(data[i].CTIME).toString('yyyy-MM-dd')));
            } else if (timeType === 'hour' && data[i].TIMECODE === '0') {
                if (new Date().getTime() < new Date(data[i].CTIME).getTime()) {
                    continue;
                }
                xAxisData.push(new XDate(data[i].CTIME).toString("HH:00\nM/d\nyyyy"));
                seriesData.push(data[i].CDATA);
                ctimes.push(new Date(data[i].CTIME));
            } else if (timeType === 'hour' && data[i].TIMECODE === '1') {
                if (new Date().getTime() < new Date(data[i].CTIME).getTime()) {
                    continue;
                }
                xAxisData.push(new XDate(data[i].CTIME).toString("HH:00\nM/d\nyyyy"));
                seriesData.push(data[i].CDATA);
                ctimes.push(new Date(data[i].CTIME));
            } else if (timeType === 'hour' && data[i].TIMECODE === '2') {
                if (new Date().getTime() < new Date(data[i].CTIME).getTime()) {
                    continue;
                }
                xAxisData.push(new XDate(data[i].CTIME).toString("HH:00\nM/d\nyyyy"));
                seriesData.push(data[i].CDATA);
                ctimes.push(new Date(data[i].CTIME));
            }
        }

        if (timeType === 'hour') {
            let timeTemp = new XDate(selectTime).toString('yyyy MM dd')
            for (let i = 0; i < ctimes.length; i++) {
                if (new Date(timeTemp).getTime() <= ctimes[i].getTime()) {
                    i = parseInt(i);
                    startValue = i - 2 < 0 ? 0 : i - 2;
                    endValue = ctimes.length - 1 < i + 2 ? ctimes.length - 1 : i + 2;
                    break;
                }
            }
        } else {
            let flag = true;
            for (let i = 0; i < ctimes.length; i++) {
                if (new Date(selectTime).getTime() <= new Date(ctimes[i]).getTime()) {
                    i = parseInt(i);
                    startValue = i - 3 < 0 ? 0 : i - 3;
                    endValue = ctimes.length - 1 < i + 2 ? ctimes.length - 1 : i + 2;
                    flag = false;
                    break;
                }
            }
            if (flag && ctimes.length > 0) {
                startValue = ctimes.length - 4 < 0 ? 0 : ctimes.length - 4;
                endValue = ctimes.length - 1
            }
        }
        let option = {
            textStyle: {
                fontSize: chartFontSize,
                color: '#ccc'
            },
            grid: {
                top: '10%',
                height: '68%',
                width: '86%',
                left: '7%'
            },
            animation: false,
            xAxis: [{
                type: 'category',
                min: 0,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    textStyle: {
                        color: '#ccc',
                        fontSize: chartFontSize
                    }
                },
                splitLine: {
                    show: false
                },
                data: xAxisData
            }],
            yAxis: [{
                type: 'value',
                min: 0,
                nameTextStyle: {
                    color: '#ccc'
                },
                axisLine: {
                    show: false,
                    onZero: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#3f4147'
                    }
                },
                axisLabel: false
            }],
            dataZoom: {
                show: 'true',
                type: 'inside',
                startValue: startValue,
                endValue: endValue
            },
            series: [{
                type: 'line',
                smooth: true,
                symbolSize: 10,
                lineStyle: {
                    normal: {
                        color: '#e6d784'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter: '{c}',
                        textStyle: {
                            color: '#ccc'
                        }
                    }
                },
                data: seriesData
            }]
        };
        if (this.refs.aveDataChart) {
            this.aveDataChart = echarts.init(this.refs.aveDataChart);
            this.aveDataChart.setOption(option);
        }

    },
    setAveDataChartByDay(data) {
        let seriesData = [],
            xAxisData = [];
        for (let i in data) {
            if (parseInt(data[i].CDATA) === 0) {
                continue
            }
            xAxisData.push(new XDate(data[i].CTIME).toString("MM/dd\nyyyy"));
            seriesData.push(data[i].CDATA);
        }
        let option = {
            textStyle: {
                fontSize: chartFontSize,
                color: '#ccc'
            },
            grid: {
                top: '10%'
            },
            animation: false,
            xAxis: [{
                type: 'category',
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    textStyle: {
                        color: '#ccc',
                        fontSize: chartFontSize,
                    }
                },
                splitLine: {
                    show: false,
                },
                data: xAxisData
            }],
            yAxis: [{
                type: 'value',
                axisLine: {
                    show: false,
                    onZero: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#3f4147'
                    }
                },
                axisLabel: false
            }],
            dataZoom: {
                show: 'true',
                type: 'inside',
                startValue: 0,
                endValue: 5
            },
            series: [{
                type: 'line',
                smooth: true,
                lineStyle: {
                    normal: {
                        color: '#e6d784'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter: '{c}',
                        textStyle: {
                            color: '#ccc'
                        }
                    }
                },
                data: seriesData
            }]
        };
        if (this.refs.aveDataChart) {
            this.aveDataChart = echarts.init(this.refs.aveDataChart);
            this.aveDataChart.setOption(option);
        }
    },
    setContrastChart(data, time) {
        let self = this,
            timeType = this.state.TimeType,
            year = new Date(time).getFullYear(),
            xAxisData = [],
            series = [],
            division = [],
            times = [],
            formatter,
            startValue = 0,
            endValue = 5;
        for (let i = 0; i < data.length; i++) {
            if (timeType === 'year') {
                xAxisData.push(new XDate(data[i].CTIME).toString('yyyy') + '年');
                times.push(new Date(new XDate(data[i].CTIME).toString('yyyy')));
            } else if (timeType === 'month' && data[i].TIMECODE === '2') {
                xAxisData.push(new XDate(data[i].CTIME).toString('MM') + '月\n' + new XDate(data[i].CTIME).toString('yyyy') + '年');
                times.push(new Date(new XDate(data[i].CTIME).toString('yyyy MM')));
            } else if (timeType === 'season' && data[i].TIMECODE === '0') {
                xAxisData.push('第' + data[i].CTIME + '季度\n' + (year - 1) + '年');
                times.push(new Date(new XDate(year - 1 + ' ' + ((parseInt(data[i].CTIME) - 1) * 3 + 1)).toString('yyyyMM')));
            } else if (timeType === 'season' && data[i].TIMECODE === '1') {
                xAxisData.push('第' + data[i].CTIME + '季度\n' + year + '年');
                times.push(new Date(new XDate(year + ' ' + ((parseInt(data[i].CTIME) - 1) * 3 + 1)).toString('yyyyMM')));
            } else if (timeType === 'season' && data[i].TIMECODE === '2') {
                xAxisData.push('第' + data[i].CTIME + '季度\n' + (year + 1) + '年');
                times.push(new Date(new XDate(year + 1 + ' ' + ((parseInt(data[i].CTIME) - 1) * 3 + 1)).toString('yyyyMM')));
            } else if (timeType === 'week' && data[i].TIMECODE === '1') {
                xAxisData.push(new XDate(data[i].WEEKSTARTDAY).toString("MM/dd\nyyyy年"));
                times.push(new Date(data[i].WEEKENDDAY))
            } else if (timeType === 'day' && data[i].TIMECODE === '3') {
                xAxisData.push(new XDate(data[i].CTIME).toString("MM/dd\nyyyy年"));
                times.push(new Date(data[i].CTIME))
            }
            if (timeType === 'year') {
                division.push(parseInt(data[i].CDATA));
            } else if (timeType === 'season' && data[i].TIMECODE === '1') {
                division.push(parseInt(data[i].CDATA));
            } else if (timeType === 'month' && data[i].TIMECODE === '2') {
                division.push(parseInt(data[i].CDATA));
            } else if (timeType === 'week' && data[i].TIMECODE === '1') {
                division.push(parseInt(data[i].CDATA));
            } else if (timeType === 'day' && data[i].TIMECODE === '3') {
                division.push(parseInt(data[i].CDATA));
            }
        }
        let len = 2, names;
        if (timeType === 'day') {
            formatter = '去年同比: {c0}%<br/>上月同比：{c1}%<br/>环比: {c2}%';
            names = ['去年同比', '上月同比', '环比'];
            len = 3;
        } else if (timeType === 'year') {
            formatter = '环比: {c0}%';
            names = ['环比'];
            len = 1;
        } else if (timeType === 'season') {
            formatter = '去年同比: {c0}%<br/>环比: {c1}%';
            names = ['去年同比', '环比'];
        } else if (timeType === 'month') {
            formatter = '去年同比: {c0}%<br/>环比: {c1}%';
            names = ['去年同比', '环比'];
        } else if (timeType === 'week') {
            formatter = '去年同比: {c0}%<br/>环比: {c1}%';
            names = ['去年同比', '环比'];
        }
        for (let i = 0; i < len; i++) {
            series[i] = {
                type: 'bar',
                barWidth: 25,
                barGap: '3%',
                name: names[i],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: '{c}%',
                            textStyle: {
                                color: '#ccc',
                                fontSize: chartFontSize
                            }
                        }
                    }
                },
                data: []
            };
        }
        let colors = ['#ffdd8a', '#beb1f9', '#c5ebf6']; //去年同比， 上月同比， 环比
        if (timeType === 'year') {
            let value;
            for (let j = 0; j < data.length; j++) {
                if (j === 0 || division[j] === 0) {
                    value = '-';
                } else {
                    value = ((division[j] - division[j - 1]) / division[j] * 100).toFixed(1);
                }
                let position = value < 0 ? 'bottom' : 'top';
                series[0].data.push({
                    value: value,
                    label: {
                        normal: {
                            position: position
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: colors[0]
                        }
                    }
                });
            }
        } else if (timeType === 'season') {
            let seasonData = [];
            for (let j = 0; j < data.length; j++) {
                let index = parseInt(data[j].TIMECODE);
                let CTIME = parseInt(data[j].CTIME);
                seasonData[index * 4 + CTIME - 1] = parseInt(data[j].CDATA);
            }
            for (let i = 0; i < seasonData.length; i++) {
                //去年同比
                let value = seasonData[i];
                if (value === 0 || seasonData[i - 4] === 0 || i - 4 < 0) {
                    value = '-';
                } else {
                    value = ((value - seasonData[i - 4]) / value * 100).toFixed(1);
                }
                let position = value < 0 ? 'bottom' : 'top';
                series[0].data.push({
                    value: value,
                    label: {
                        normal: {
                            position: position
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: colors[0]
                        }
                    }
                });
                //环比
                value = seasonData[i];
                if (value === 0 || seasonData[i - 1] === 0 || i - 1 < 0) {
                    value = '-';
                } else {
                    value = ((value - seasonData[i - 1]) / value * 100).toFixed(1);
                }
                position = value < 0 ? 'bottom' : 'top';
                series[1].data.push({
                    value: value,
                    label: {
                        normal: {
                            position: position
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: colors[2]
                        }
                    }
                });
            }
        } else if (timeType === 'day' || timeType === 'month') {
            for (let j = 0; j < data.length; j++) {
                if (parseInt(data[j].TIMECODE) >= len) {
                    continue
                }
                let value = parseInt(data[j].CDATA);
                let index = series[data[j].TIMECODE].data.length;
                if (value === 0 || division[index] === 0) {
                    value = '-';
                } else {
                    let index = series[data[j].TIMECODE].data.length;
                    value = ((division[index] - value) / division[index] * 100).toFixed(1);
                }
                let color = colors[data[j].TIMECODE];
                if (timeType === 'month' && parseInt(data[j].TIMECODE) === 1) {
                    color = colors[2];
                }
                let position = value < 0 ? 'bottom' : 'top';
                series[data[j].TIMECODE].data.push({
                    value: value,
                    label: {
                        normal: {
                            position: position
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: color
                        }
                    }
                });
            }
        } else if (timeType === 'week') {
            for (let j = 0; j < data.length; j++) { //计算去年同比
                if (parseInt(data[j].TIMECODE) >= 1) {
                    continue
                }
                let value = parseInt(data[j].CDATA);
                let index = series[0].data.length;
                if (value === 0 || division[index] === 0) {
                    value = '-';
                } else {
                    value = ((division[index] - value) / division[index] * 100).toFixed(1);
                }
                let position = value < 0 ? 'bottom' : 'top';
                series[0].data.push({
                    value: value,
                    label: {
                        normal: {
                            position: position
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: colors[0]
                        }
                    }
                });
            }
            for (let j = 0; j < division.length; j++) { //计算环比
                let value;
                if (j === 0 || division[j] === 0 || division[j - 1] === 0) {
                    value = '-';
                } else {
                    value = ((division[j] - division[j - 1]) / division[j] * 100).toFixed(1);
                }
                let position = value < 0 ? 'bottom' : 'top';
                series[1].data.push({
                    value: value,
                    label: {
                        normal: {
                            position: position
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: colors[2]
                        }
                    }
                });
            }
        }
        for (let i = xAxisData.length - 1; i >= 0; i--) {
            let flag = false;
            for (let j = 0; j < series.length; j++) {
                if (series[j].data[i].value !== '-') {
                    flag = true;
                }
            }
            if (flag === false) {
                xAxisData.splice(i, 1);
                times.splice(i, 1);
                for (let j = 0; j < series.length; j++) {
                    series[j].data.splice(i, 1);
                }
            }
        }
        if (times.length > 0) {
            let flag = true;
            let time = times[times.length - 1];
            if (timeType === 'year') {
                if (parseInt(new XDate(time).toString('yyyy')) >= new Date().getFullYear()) {
                    flag = false;
                }
            } else if (timeType === 'season') {
                if (parseInt(new XDate(time).toString('yyyyMM') + 3) >= parseInt(new XDate().toString('yyyyMM'))) {
                    flag = false;
                }
            } else if (timeType === 'month') {
                if (parseInt(new XDate(time).toString('yyyyMM')) >= parseInt(new XDate().toString('yyyyMM'))) {
                    flag = false;
                }
            } else if (timeType === 'week') {
                if (parseInt(new XDate(time).toString('yyyyMMdd')) >= parseInt(new XDate().toString('yyyyMMdd'))) {
                    flag = false;
                }
            } else if (timeType === 'day') {
                if (parseInt(new XDate(time).toString('yyyyMMdd')) >= parseInt(new XDate().toString('yyyyMMdd'))) {
                    flag = false;
                }
            }
            if (flag === false) {
                xAxisData.splice(times.length - 1, 1);
                for (let j = 0; j < series.length; j++) {
                    series[j].data.splice(times.length - 1, 1);
                }
            }
        }
        if (xAxisData.length <= 0) {
            $('#contrastChart').css('display', 'none');
        } else {
            startValue = xAxisData.length - 5 < 0 ? 0 : xAxisData.length - 5,
                endValue = xAxisData.length - 1;
        }

        let option = {
            color: colors,
            textStyle: {
                fontSize: chartFontSize
            },
            animation: false,
            title: {
                text: '上升',
                textStyle: {
                    color: '#b81c2f',
                    fontWeight: 'normal',
                    fontSize: chartFontSize
                },
                left: '2%',
                top: '0%'
            },
            legend: {
                selectedMode: 'single',
                data: names,
                textStyle: {
                    color: '#fff',
                }
            },
            grid: {
                width: '90%',
                left: '5%',
                top: '10%'
            },
            tooltip: {
                trigger: 'axis',
                formatter: formatter
            },
            xAxis: [{
                type: 'category',
                axisTick: {
                    show: false
                },
                splitNumber: 1,
                axisLabel: {
                    margin: 17,
                    show: true,
                    interval: 0,
                    textStyle: {
                        color: '#ccc',
                        fontSize: chartFontSize
                    }
                },
                splitLine: {
                    show: false
                },
                data: xAxisData,
                boundaryGap: ['20%', '20%']
            }],
            yAxis: [{
                name: '下降',
                nameLocation: 'start',
                nameTextStyle: {
                    color: '#1acf3c',
                    fontSize: chartFontSize
                },
                type: 'value',
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: false
            }],
            dataZoom: {
                show: 'true',
                type: 'inside',
                startValue: startValue,
                endValue: endValue
            },
            series: series
        };
        if (this.refs.contrastChart) {
            this.contrastChart = echarts.init(this.refs.contrastChart);
            this.contrastChart.setOption(option);
        }
    },
    selectTypeOnChange(value) {
        this.selectFlowDay = false
        this.state.TimeType = value;
        this.state.StartDate = null;
        this.state.EndDate = null;
        this.setState({ TimeType: value, StartDate: null, EndDate: null })
        this.getTrendAnalysisFlow();
    },
    onChange(startDate, endDate) {
        this.selectFlowDay = true;
        this.state.StartDate = startDate;
        this.state.EndDate = endDate;
        this.setState({ StartDate: this.state.StartDate, EndDate: this.state.EndDate })
        this.getTrendAnalysisFlowByDay();
    },
    selectTime() {
        Popup.show(<SelectTime onClose={() => Popup.hide()} onChange={this.onChange} />);
    },
    render() {
        let node, text = '时段选择';

        if (this.state.TimeType !== 'hour' && !this.selectFlowDay) {
            node = <div>
                <div className="bottomTitle">客流量同环比图</div>
                {
                    this.state.loading ? <div className="chart flex-center" key={1}>
                        <Icon type="loading" size={'md'} />
                    </div> : <div className="contrastChart chart flex-center" ref='contrastChart' key={2}></div>
                }
            </div>
        }
        if (this.state.StartDate) {
            text = '时段选择:' + moment(this.state.StartDate).format('YYYY/MM/DD') + '-' + moment(this.state.EndDate).format('YYYY/MM/DD');
        }
        return (
            <div id="flowAveTrend" className="flowContent">
                <div className="flowHead">
                    <div className="title">时段客流</div>
                </div>
                <div>
                    <SelectType data={timeData} value={this.state.TimeType} onChange={this.selectTypeOnChange} />
                </div>
                <div className="flex jc-end btn-line">
                    <div className="btn-select" onClick={this.selectTime}>{text}<i className="icon-triangle"></i></div>
                </div>
                <div className="bottomTitle">客流走势分析图</div>
                {
                    this.state.loading ? <div className="chart flex-center" key={1}>
                        <Icon type="loading" size={'md'} />
                    </div> : <div className="aveDataChart chart flex-center" ref='aveDataChart' key={2}></div>
                }
                {node}
            </div>
        );
    }
})

module.exports = FlowAveTrend;